<template>
    <div>
        <mt-datetime-picker
                v-model="pickerValue"
                :type="type"
                ref="picker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="handleConfirm">
        </mt-datetime-picker>
        <div class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--mini">
            <i class="el-input__icon el-range__icon el-icon-date"></i>
            <input autocomplete="off" readonly placeholder="开始日期" ref="_0"  class="el-range-input" :value="values[0]" @click="openPicker(0)">
            <span class="el-range-separator" v-html="rangeSeparator"></span>
            <input autocomplete="off" readonly placeholder="结束日期" ref="_1"   class="el-range-input" :value="values[1]" @click="openPicker(1)" >
            <i class="el-input__icon el-range__close-icon"></i>
        </div>
    </div>

</template>

<script>
export default {
  name: 'mobile-date',
  components: {  },
  data() {
    return {
      pickerValue: '',
      index: null,
      values: [],
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  props: {
    type: {
      type: String,
      default: 'date'
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd hh:mm:ss'
    },
    rangeSeparator: {
      type: String,
      default: '-'
    }
  },
  watch: {
    type: {
      handler(v) {
        if (v==='date') {
          this.format = 'yyyy-MM-dd';
        } else {
          this.format =  'yyyy-MM-dd hh:mm:ss'
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleConfirm(v) {
      this.values[this.index] = v.format(this.format);
      this.$refs['_'+this.index].value = this.values[this.index];
      this.$emit('handlerValueChange', this.values);
    },
    openPicker(index) {
      this.index = index;
      this.$refs.picker.open();
    },
  },
  computed: {
    params() {
      return this.$store.state.home.params || {};
    }
  },
}
</script>

<style scoped>

</style>
